<template>
	<view style="background-color: #fff;">
		<view style="padding: 10px;">
			<!-- <view style="background-color: #007AFF;border-radius: 10px;color: #fff;padding: 10px;">
				<uni-row>
				    <uni-col :span="18">
						<text style="padding-right: 5px;">{{address.realname}}</text>
						<text>{{address.mobile_number}}</text>
				    </uni-col>
				    
				</uni-row>
				<view style="margin-top: 10px;">{{address.region}}{{address.address}}</view>
			</view> -->

			<view style="border-bottom: 1px solid #eee;padding-bottom: 10px;font-weight: bold;">
				<uni-row style="display: flex;">
					<uni-col>
						订单信息
					</uni-col>
					<uni-col style="text-align: right;">
						<view style="color: #007AFF; margin-left: 130rpx;">{{services_detail.status_label}}</view>
					</uni-col>
				</uni-row>


			</view>

			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					服务项目:
				</uni-col>
				<uni-col :span="12">
					<view style="text-align: right;">{{services_detail.title}}</view>
				</uni-col>
			</uni-row>

			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					售后类型:
				</uni-col>
				<uni-col :span="12">
					<view style="text-align: right;">{{services_detail.type}}</view>
				</uni-col>
			</uni-row>


			<uni-row style="padding: 10px 0;">
				<uni-col :span="6">
					预约时间:
				</uni-col>
				<uni-col :span="13">
					<view style="text-align: right;">
						{{services_detail.service_start}}
					</view>
				</uni-col>
				<view style="display: flex; margin-left: 560rpx; position: absolute;">
					<button size="mini" style="border-radius: 30px; color: #FFFFFF; background-color: #007AFF; margin-left: 5px; font-size: 8px;">修改时间</button>
					<!-- <image src="../../static/time.jpg" style="width: 72px; height: 25px; margin-left: 5px;"></image> -->
				</view>
			</uni-row>
			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					上门费用:
				</uni-col>
				<uni-col :span="12">
					<view style="text-align: right; color: red;">￥{{services_detail.front_price}}<text
							v-if="services_detail.status == 1" style="padding-left: 5px;">未支付</text>
							<text v-else style="padding-left: 5px;">已支付</text>
					</view>
				</uni-col>
			</uni-row>
			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					其他费用:
				</uni-col>
				<uni-col :span="12">
					<view style="text-align: right; color: red;">￥{{services_detail.final_price}}<text
							v-if="services_detail.status == 30" style="padding-left: 5px;">已支付</text>
						<text style="padding-left: 5px;" v-else>待报价</text>
					</view>
				</uni-col>
			</uni-row>

			<uni-row style="padding: 10px 0;">
				<uni-col :span="6">
					服务人员:
				</uni-col>
				<uni-col :span="13">
					<view style="text-align: right;">{{address.realname}}
					</view>
				</uni-col>
				<view style="display: flex; margin-left: 560rpx; position: absolute;" @click="call()">
					<button size="mini" style="border-radius: 30px; color: #FFFFFF; background-color: #007AFF; margin-left: 5px; font-size: 8px;">联系师傅</button>
					<!-- <image src="../../static/type.jpg" style="width: 72px; height: 25px; margin-left: 5px;"></image> -->
				</view>
			</uni-row>

			<view style="font-size: 20px;font-weight: bold;border-bottom: 1px solid #eee;padding: 20px 0;">
				其他信息
			</view>

			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					订单编号:
				</uni-col>
				<uni-col :span="12">
					<view style="text-align: right;">{{services_detail.code}}</view>
				</uni-col>
			</uni-row>

			<uni-row style="padding: 10px 0;">
				<!-- <uni-col :span="12">
					
					
			    </uni-col> -->
				<view style="display: flex;">文字备注:<input style="margin-right: auto;" />{{services_detail.memo}}</view>
				<!-- <uni-col :span="12">
					
			    </uni-col> -->
				<!-- <view style="margin-top: 10px;">{{services_detail.memo}}</view> -->
			</uni-row>

			<uni-row style="padding: 10px 0;">
				<uni-col :span="12">
					图片备注：
				</uni-col>
				<uni-col :span="12">
					<!-- <view style="text-align: right;">{{services_detail.status_label}}</view> -->
				</uni-col>
			</uni-row>



			<view style="margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;">
				<view class="block-content">
					<view v-for="(item, idx) in services_detail.album" class="character-avatar">
						<image :src="item" style="width: 180px; height: 120px;" />
					</view>
				</view>
			</view>
			<button v-if="services_detail.status == 1" style="color: #FFFFFF; background-color: #007AFF;"
				@click="payFrontPrice()">支付定金</button>
			<button v-if="services_detail.status == 10" style="color: #FFFFFF; background-color: #007AFF;"
				@click="payFinallPrice()">确定完成</button>
			<button v-if="services_detail.status == 20" style="color: #FFFFFF; background-color: #007AFF;"
				@click="payFinallPrice()">支付尾款</button>
			<view style="margin-top: 40px;font-size: 14px;">
				<uni-row style="padding: 10px 0;">
					<uni-col :span="12">
						<view style="text-align: right;margin-right: 10px;" @click="showmo()">联系客服</view>
					</uni-col>
					<uni-col :span="12">
						<view style="text-align: left;margin-left: 10px;">取消订单</view>
					</uni-col>
				</uni-row>
			</view>
			<!-- <button v-if="services_detail.status == 20" type="warn" @click="yuyue()"></button> -->
		</view>

		<uni-popup ref="popup" style="width: 100%;" type="center" :animation="false">
			<view style="background-color: #fff;width: 100%;">
				<radio-group @change="popChange" style="width: 300px;padding: 20px;">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;padding-bottom: 10px;">
						<view style="flex: 1;">
							<image style="width: 30px;height: 30px;" src="../../static/zhifubao.jpg"></image>
						</view>
						<view style="flex: 6;">
							<text style="line-height: 30px;">支付宝</text>
						</view>
						<view style="flex: 1;">
							<view style="text-align: right;">
								<radio style="transform:scale(0.8);" value="20" />
							</view>
						</view>
					</label>
					<!-- <label class="uni-list-cell uni-list-cell-pd" style="display: flex;">
						<view style="flex: 1;">
							<image style="width: 30px;height: 30px;" src="../../static/WeChat.png"></image>
						</view>
						<view style="flex: 6;">
							<text style="line-height: 30px;">微信</text>
						</view>
						<view style="flex: 1;">
							<view style="text-align: right;">
								<radio style="transform:scale(0.8);" value="10" />
							</view>
						</view>
					</label> -->
				</radio-group>
				<view style="padding: 0 10px 10px 10px;">
					<button v-if="services_detail.status == 1" type="warn"
						@click="confirmPay">确认支付￥{{services_detail.front_price}}</button>
					<button v-if="services_detail.status == 10" type="warn"
						@click="confirmPay">确认支付￥{{services_detail.final_price}}</button>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				services_detail: {},
				address: {
					id: 0
				},
				sel_pay_type: 0,
			}
		},
		onLoad(opts) {
			// this.id = opts.id;
			// this.getOrderDetail();
		},
		onShow() {

			this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				let t = this;
				let order_id = uni.getStorageSync('tmp_order_id');
				this.$api.getOrderDetail({
					id: order_id
				}).then(res => {
					t.services_detail = res.data;
					t.address = res.data.address
				})
			},
			payFrontPrice(item) {
				this.$refs.popup.open();
				// console.log(this.services_detail)
			},
			payFinallPrice(item) {
				this.$refs.popup.open();
				// console.log(this.sel_order.code)
			},
			popChange(e) {
				this.sel_pay_type = e.detail.value;
			},
			confirmPay() {
				if (this.sel_pay_type == 0) {
					return;
				}
				if (this.services_detail.status == 1) {
					this.$api.postPayFrontPrice({
						code: this.services_detail.code,
					}).then(res => {
						if (res.data.code_url) {
							location.href = res.data.code_url
						}
					})
				}
				if (this.services_detail.status == 10) {
					this.$api.postPayFinalPrice({
						code: this.services_detail.code,
					}).then(res => {
						if (res.data.code_url) {
							location.href = res.data.code_url
						}
					})
				}
			},
			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '123353325523',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.block-content {
		display: flex;

		&>.character-avatar {
			margin-left: 0;
			margin-right: 5px;

			&>image {
				width: 75px;
				height: 75px;
				border-radius: 10px;
				margin-right: 2px;
			}
		}
	}
</style>
